<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <link rel="icon" href="./source/image/drum.png">
    <title>JS 30: Drum Kit</title>
</head>
<body>
    
    <section class="keys">
        <div class="key" data-key="70">
            <kbd>F</kbd>
            <span class="sound">Small drum</span>
        </div>
        <div class="key" data-key="71">
            <kbd>G</kbd>
            <span class="sound">Sner</span>
        </div>
        <div class="key" data-key="72">
            <kbd>H</kbd>
            <span class="sound">Crash</span>
        </div>
        <div class="key" data-key="74">
            <kbd>J</kbd>
            <span class="sound">Special tom</span>
        </div>
    </section>

    <audio src="./source/music/zvuk-malogo-barabana.wav" data-key="70"></audio>
    <audio src="./source/music/sner-med-komp-edit.wav" data-key="71"></audio>
    <audio src="./source/music/tarelka-dlya-kresha.wav" data-key="72"></audio>
    <audio src="./source/music/zvuk-barabana-tom-smontirovannyiy-iz-polevoy-zapisi.wav" data-key="74"></audio>

    <script>
        const keys = Array.from(document.querySelectorAll('.keys > .key')).map(item => +item.dataset['key']);
        
        function drumHandler(e) {
            console.log(keys.includes(e.keyCode));
            if (!keys.includes(e.keyCode)) return;

            const keySelector = `data-key="${e.keyCode}"`;

            const audio = document.querySelector(`audio[${keySelector}]`);
            const keyEl = document.querySelector(`.key[${keySelector}]`);

            console.log(audio, keyEl);

            keyEl.classList.add('playing');
            audio.currentTime = 0;
            audio.play();
        }

        function afterTransformHandler(e) {
            if (e.propertyName !== 'transform') return;
            this.classList.remove('playing');
        }

        window.addEventListener('keydown', drumHandler);
        document.querySelectorAll('.keys > .key').forEach(item => item.addEventListener('transitionend', afterTransformHandler));
    </script>
</body>
</html>